<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>标签管理</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="assets/css/LineIcons.css">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="assets/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="assets/css/style.css">

</head>
<body>
<!-- 导入页眉 -->
<div class="header"></div>

<!--====== 自定义代码开始 ======-->
<section id="about" class="about-area" style="margin-top: 30px">
    <div class="container" id="tagsModal">


        <!--====== 从这里开始 ======-->
        <div class="container" style="border-bottom: solid 1px #999999;margin-bottom: 20px;">
            <h3 style="margin-bottom: 20px">标签管理</h3>
        </div>
        <!-- 添加标签 -->
        <div class="container">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addTags"
                    style="margin-bottom: 10px">
                添加标签
            </button>
            <!-- 添加标签模态框 -->
            <div class="modal fade" id="addTags" data-backdrop="static" data-keyboard="false" tabindex="-1"
                 role="dialog"
                 aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="addTagsLabel">添加标签</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="addTagsName" class="col-form-label">标签名:</label>
                                    <input type="text" class="form-control" id="addTagsName" v-model="addTagsName">
                                </div>
                                <label for="addColorSelect">选择颜色：</label>
                                <select class="form-control" id="addColorSelect" :class='"btn-"+addColorSelect'
                                        v-model="addColorSelect">
                                    <option class="btn-primary" value="primary">绀碧</option>
                                    <option class="btn-secondary" value="secondary">柳煤</option>
                                    <option class="btn-success" value="success">常磐绿</option>
                                    <option class="btn-danger" value="danger">朱绯</option>
                                    <option class="btn-warning" value="warning">山吹黄</option>
                                    <option class="btn-info" value="info">缥蓝</option>
                                    <option class="btn-light" value="light">乳白</option>
                                    <option class="btn-dark" value="dark">漆黑</option>
                                </select>
                                </select>
                                <div class="form-group">
                                    <label for="addTagsDesc" class="col-form-label">描述:</label>
                                    <textarea class="form-control" id="addTagsDesc" v-model="addTagsDesc"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary" @click="addSubmit">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container" style="border: solid 1px #999999;margin: 10px;padding: 20px">
            <!-- 标签详情 -->
            <div class="row">
                <div v-for="(tag,index) in tagList" style="margin: 10px">
                    <button type="button" :class='"btn btn-"+tag.tagType' data-toggle="modal"
                            data-target="#staticBackdrop"
                            @click="tellId(index)">
                        {{tag.tagName}}
                    </button>
                </div>
            </div>
            <!-- 标签详情模态框 -->
            <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false"
                 tabindex="-1"
                 role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">{{tagDetail.tagName}}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="recipient-name" class="col-form-label">标签名:</label>
                                    <input type="text" class="form-control" id="recipient-name"
                                           v-model="tagDetail.tagName">
                                </div>
                                <label for="Select01" class="col-form-label">选择颜色:</label>
                                <select class="form-control" id="Select01" v-model="tagDetail.tagType"
                                        :class='"btn-"+tagDetail.tagType'>
                                    <option class="btn-primary" value="primary">绀碧</option>
                                    <option class="btn-secondary" value="secondary">柳煤</option>
                                    <option class="btn-success" value="success">常磐绿</option>
                                    <option class="btn-danger" value="danger">朱绯</option>
                                    <option class="btn-warning" value="warning">山吹黄</option>
                                    <option class="btn-info" value="info">缥蓝</option>
                                    <option class="btn-light" value="light">乳白</option>
                                    <option class="btn-dark" value="dark">漆黑</option>
                                </select>
                                <div class="form-group">
                                    <label for="message-text" class="col-form-label">描述:</label>
                                    <textarea class="form-control" id="message-text"
                                              v-model="tagDetail.tagDesc"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-toggle="modal"
                                    data-target="#deleteModal">
                                删除
                            </button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="changeTag">关闭
                            </button>
                            <button type="button" class="btn btn-primary" @click="updateTag">提交</button>
                        </div>
                        <!--删除模态框-->
                        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog"
                             aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel" style="color: red">！警告</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        是否删除该标签
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                        <button type="button" class="btn btn-primary" @click="delectTag">确认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--====== 从这里结束 ======-->

    </div> <!-- container -->
</section>
<!--====== 自定义代码结束 ======-->


<!-- 导入页脚 -->
<div class="footer"></div>
<!--导入所有js文件-->
<!--====== Jquery js ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>
<!--====== Isotope js ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Scrolling Nav js ======-->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/scrolling-nav.js"></script>
<!--====== Main js ======-->
<script src="assets/js/main.js"></script>
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== HttpUtil js ======-->
<script src="assets/js/util/HttpUtil.js"></script>
</body>
</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });
</script>
<script>

    var vm = new Vue({
        el: '#tagsModal',
        data: {
            addTagsName: '',
            addTagsDesc: '',
            addColorSelect: 'primary',
            color: 'btn-' + this.addColorSelect,
            tagList: [],
            tagIndex: '',
            tagDetail: [],
            newTagDetail: [],
            oldTagDetail: [],
        },
        watch: {
            tagDetail: function (val, oldVal) {
                thisObj = this;
                console.log(val);    //点击后当前标签的值
                let temp = val;
                console.log("temp:" + temp);
                thisObj.oldTagDetail = val;
                console.log("oldTagDetail:" + thisObj.oldTagDetail); //第一次旧值为空
                deep:true
            }
        },
        methods: {
            addSubmit: function () {
                let url = "tag.do";
                let tagName = this.addTagsName;
                let tagDesc = this.addTagsDesc;
                let tagType = this.addColorSelect;
                let params = {
                    tagName: tagName,
                    tagDesc: tagDesc,
                    tagType: tagType,
                };
                doPost(url, params, function callback() {
                    location.href = "tags.html"
                })
            },
            getTags: function () {
                let thisObj = this;
                let url = "tag.do";
                doGet(url, function (resp) {
                    thisObj.tagList = resp;
                    // console.log(thisObj.tagList)
                })
            },
            test: function () {
                let thisObj = this;
                // console.log(thisObj.tagList)
            },
            tellId: function (tagId) {
                let thisObj = this;
                // console.log(tagId)
                // thisObj.tagIndex = tagId
                thisObj.tagDetail = thisObj.tagList[tagId]
                // console.log(thisObj.tagDetail)
            },
            delectTag: function () {
                let thisObj = this;
                // console.log("删除按钮：" + thisObj.tagDetail.tagId)
                let url = "deleteTag.do";
                let params = {
                    tagId: thisObj.tagDetail.tagId
                };
                doPost(url, params, function callback() {
                });
                location.href = "tags.html"
            },
            updateTag: function () {
                let thisObj = this;
                let url = "updateTag.do";
                let params = {
                    tagDesc: thisObj.tagDetail.tagDesc,
                    tagId: thisObj.tagDetail.tagId,
                    tagName: thisObj.tagDetail.tagName,
                    tagType: thisObj.tagDetail.tagType,
                };
                doPost(url, params, function callback() {
                    location.href = "tags.html"
                })
            },
            changeTag: function () {
                thisObj = this;
                thisObj.newTagDetail = thisObj.tagDetail;
                console.log("newTagDetail" + thisObj.newTagDetail);
                if (thisObj.oldTagDetail.toString() !== thisObj.newTagDetail.toString()) {
                    console.log(false);
                    return
                }
                console.log(true)
            }
        },
        mounted: function () {
            this.getTags();
        }
    })
</script>